<template>
  <div class="container">
    <el-form :model="formInline" label-width="100px">
      <el-form-item label="我校动态">
        <div>
          <div class="flex alignCenter">
            <el-button type="primary" plain @click="proxy.$refs.uploadImageRef.inputClick()">新增</el-button>
            （建议尺寸1660*1245）
          </div>
          <div class="banners flex flexWrap">
            <div class="banner-box" v-for="(item, index) in formInline.dynamic" :key="index">
              <div class="close flex" @click="formInline.dynamic.splice(index, 1)">
                <el-icon color="#fff">
                  <Close />
                </el-icon>
              </div>
              <div class="imgUrl" @click.stop="proxy.$refs.uploadImageRef.showPreview(item.url)">
                <img :src="item.url" alt="">
              </div>
              <el-input v-model="item.title" placeholder="请输入动态标题">
                <template #prepend>标题</template>
              </el-input>
            </div>
          </div>
          <uploadImage ref="uploadImageRef" v-model="addBannerImgUrl" v-show="false"></uploadImage>
        </div>
      </el-form-item>
      <el-form-item label="前言">
        <el-input v-model="formInline.preface" placeholder="请输入前言" clearable :autosize="{ minRows:  4 }" type="textarea" />
      </el-form-item>
      <el-form-item label="公司介绍">
        <el-input v-model="formInline.companyIntro" placeholder="请输入公司介绍" clearable :autosize="{ minRows:  4 }" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let formInline = ref({
  preface: "",
  companyIntro: "",
  dynamic: [],
});
let loading = ref(false);
let addBannerImgUrl = ref("");

onMounted(() => {
  getInfo();
});

async function getInfo() {
  let resp = await proxy.$apis.webHome({
    type: "details",
  });
  formInline.value = proxy.$utils.formatFunction(resp, { ...formInline.value });
  if (resp._id) formInline.value["_id"] = resp._id;
}

async function onSubmit() {
  try {
    loading.value = true;
    await proxy.$apis.webHome({
      data: formInline.value,
      type: "update",
    });
    proxy.$utils.showToast("保存成功");
    getInfo();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

watch(
  () => addBannerImgUrl.value,
  (newValue, oldValue) => {
    if (newValue) {
      formInline.value.dynamic.push({ url: newValue, title: "" });
      setTimeout(() => {
        addBannerImgUrl.value = "";
      }, 100);
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
  margin: 25px;
  .banners {
    margin-top: 10px;
    .banner-box {
      margin-right: 15px;
      margin-bottom: 15px;
      width: 300px;
      position: relative;
      .close {
        position: absolute;
        top: -5px;
        right: -5px;
        cursor: pointer;
        background-color: #f55950;
        border-radius: 50%;
      }
      .imgUrl {
        width: 100%;
        height: auto;
        cursor: pointer;
        img {
          width: 100%;
          display: block;
          border-radius: 10px;
          object-fit: cover;
        }
      }
      .el-input {
        margin-top: 10px;
      }
    }
  }
}
</style>






